<template>
	<view class="pageD" v-show="$store.getters.showLogin">
		<view class="mark"></view>
		<view class="inner">
			<view class="title">
				登录
			</view>
			<view class="content">
				<view class="l-con">
					<view class="l-row">
						<view class="l-label"> 
						   <image src="/static/img/shouji.png" mode="" class="lablel-img"></image>
						</view>
						<view class="l-inputbox">
							<input type="text" class="l-l-input" v-model="form1.username" placeholder="请输入手机号">
						</view>
					</view>
					<view class="l-row">
						<view class="l-label"> 
						   <image src="/static/img/mima.png" mode="" class="lablel-img lablel-img2"></image>
						</view>
						<view class="l-inputbox l-code">
							<input type="text" class="l-l-input" v-model="form1.code" placeholder="请输入验证码">
							<text class="warring" @tap="getYan" v-show="!set">
								<text>获取验证码</text>
							</text>
							<text class="warring" @tap="getYan" v-show="set">
							    <text>( {{time}} )</text>
							</text>
						</view>
					</view>
					<view class="btBox">
						<view class="bt" @tap='sbLogin'>登 录</view>
					</view>
					<view class="close" @tap="close">
						<image src="/static/img/close.png" mode="" class="closeImg"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var Phone = /^[1][3,4,5,7,8,9][0-9]{9}$/
	import baseUrl from "@/util/path.js"
	import { mapMutations } from 'vuex'
	export default {
		name:"loginD",
		data() {
			return {
				form1:{
					username:"",
					password:"",
					code:""
				},
				time:60,
				str:'获取验证码',
				jumpUrl: "",
				set:false,
				showD:false
			};
		},
		methods: {
			...mapMutations(['setShowLogin']),
			show() {
				this.showD = true;
			},
			close() {
				this.setShowLogin(false);
			},
			toast(str) {
				uni.showToast({
					title:str,
					icon:'none'
				})
			},
			async getYan() {
				if(!Phone.test(this.form1.username)) {
					this.toast("请输入正确的手机号");
					return
				}
				const _this = this;
				uni.request({
					url: baseUrl.lb + 'send_mobile_code',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'get',
					data:{
						grant_type:'password',
						client_id:baseUrl.client_id,
						client_secret:baseUrl.client_secret,
						scope:"",
						user_mobile:_this.form1.username,
						type:2
					},
					success: (res) => {
						console.log(res);
						if(res.data.status == 200) {
							_this.satrtTime();
						}
					},
					fail: (err) => {
						
					}
				})
			},
			satrtTime(){
				const _this = this;
				this.set = true;
				 let Ontime =  setInterval(function () {
					_this.time --;
					if(_this.time == 0) {
						clearInterval(Ontime);
						_this.set = false;
						_this.time = 60;
					}
			    },1000)
			},
			async getUserInfo() {
				const _this = this;
				const res = await this.$http({
					  url:'api/user/get_user_info',
					  method:'post',
					  data:{}
				 },"lb")
				 //console.log(res);
				 console.log(res);
				 if(res) {
					 uni.setStorageSync('user',res);
					 _this.toast("登录成功");
					 // console.log(this.jumpUrl);
					 window.location.reload();
					 // _this.showD = false;
					 // _this.$emit('logingetInfo');
				 }
			},
			async sbLogin() {
				const _this = this;
				if(!Phone.test(this.form1.username)) {
					this.toast('请输入正确的手机号');
					return false
				}
				if(!this.form1.code) {
					this.toast('请输入验证码');
					return false
				}
				uni.request({
					url: baseUrl.lb + 'oauth/token',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: 'post',
					data:{
						grant_type:'sms',
						client_id:baseUrl.client_id,
						client_secret:baseUrl.client_secret,
						username:_this.form1.username,
						verify_code:_this.form1.code,
						scope:""
					},
					success: (res) => {
						if(res.data.access_token) {
							uni.setStorageSync('token',res.data.access_token);
							uni.setStorageSync('refresh',res.data.refresh_token);
							_this.getUserInfo()
						} else {
							_this.toast(res.data.message);
						}
					},
					fail: (err) => {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
    .pageD {
		position: fixed;
		left:0;
		top:0;	
		right: 0;
		bottom: 0;
		.title {
			text-align: center;
			font-size: 38rpx;
			font-weight: bold;
			padding: 43rpx 0 0;
		}
		@include center();
		.inner {
			position: relative;
			z-index: 2;
			height: 620rpx;
			width: 620rpx;
			border-radius: 30rpx;
			background-color: #fff;
			.lablel-img {
				width: 46rpx;
				height: 70rpx;
				&.lablel-img2 {
					height: 60rpx;
				}
			} 
			.close {
				position: absolute;
				bottom: -120rpx;
				left: 50%;
				margin-left: -35rpx;
				.closeImg {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
		.mark {
		   position: absolute;
		   left:0;
		   top:0;	
		   right: 0;
		   bottom: 0;
		   // width: 100vh;
		   // height: 100vw;
		   z-index: 1;
		   background-color: rgba(0,0,0,0.3);
		}
	}
	
	.l-con {
		   background-color: #fff;
		   border-radius: 56rpx;
		   padding: 16rpx 62rpx 0;
		   .l-label {
			   margin-bottom: 18rpx;
			   margin-right: 18rpx;
		   }
		   .l-row {
			   display: flex;
			   padding-top: 40rpx;
			   .l-l-name {
				   font-size: 36rpx;
				   position: relative;
				   top:-4rpx;
			   }
			   .iconfont {
				   color:$color-primary;
				   font-size: 48rpx;
				   margin-right: 20rpx;
			   }
		   }
		   .l-inputbox {
			   padding: 22rpx 0;
			   border-bottom: 1px solid #e6e6e6;
			   width: 430rpx;
			   &.l-code {
				    display: flex;
					justify-content: space-between;
					.warring {
						color:#eaa057;
					}
				  .l-l-input {
				  	width: 260rpx;		   
				  } 
			   }
			   .l-l-input {
				   
			   }
		   }
		   .forgetBox {
			   width: 100%;
			   overflow: hidden;
			   padding-top: 35rpx;
			   .forget-i {
				   flex:none;
				   .warring {
					   color:#f24545;
				   }
			   }
		   }
		   .btBox {
			    padding-top: 50rpx;
			   .bt{
				  font-size: 36rpx;
				  width: 363rpx;
				  height: 94rpx;
				 
				  
				  @include botton-n();
			   }
			 
		   }
	}
</style>